<!DOCTYPE html>
<html lang="zh"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
    <meta charset="UTF-8"/>
    <title>导航栏</title>
</head>
<body>
<div th:fragment="copy">
    <!-- Navigation -->
    <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="home.html">综合系统</a>
        </div>
        <!-- /.navbar-header -->

        <ul class="nav navbar-top-links navbar-right"><!-- 右上 -->
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                    <i class="fa fa-bell fa-fw"></i> <i class="fa fa-caret-down"></i>
                </a>
                <ul class="dropdown-menu dropdown-messages">

                    <li th:if="${notices.size()}>0">
                        <a href="#">
                            <div>
                                <strong th:text="${notices.get(0).username}"></strong>
                                <span class="pull-right text-muted">
                                        <em th:text="${notices.get(0).time}"></em>
                                    </span>
                            </div>
                            <div th:text="${notices.get(0).content}"></div>
                        </a>
                    </li>
                    <li class="divider"></li>
                    <li th:if="${notices.size()}>1">
                        <a href="#">
                            <div>
                                <strong th:text="${notices.get(1).username}"></strong>
                                <span class="pull-right text-muted">
                                        <em th:text="${notices.get(1).time}"></em>
                                    </span>
                            </div>
                            <div th:text="${notices.get(1).content}"></div>
                        </a>
                    </li>
                    <li class="divider"></li>
                    <li th:if="${notices.size()}>2">
                        <a href="#">
                            <div>
                                <strong th:text="${notices.get(2).username}"></strong>
                                <span class="pull-right text-muted">
                                        <em th:text="${notices.get(2).time}"></em>
                                    </span>
                            </div>
                            <div th:text="${notices.get(2).content}"></div>
                        </a>
                    </li>
                    <li class="divider"></li>

                    <li>
                        <a class="text-center" href="/notices">
                            <strong>Read All Messages</strong>
                            <i class="fa fa-angle-right"></i>
                        </a>
                    </li>
                </ul>
                <!-- /.dropdown-messages -->
            </li>
            <!-- /.dropdown -->
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                    <i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
                </a>
                <ul class="dropdown-menu dropdown-user">
                    <li><a href="#"><i class="fa fa-user fa-fw"></i> User Profile</a>
                    </li>
                    <li><a href="#"><i class="fa fa-gear fa-fw"></i> Settings</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <form th:action="@{/logout}" method="post" id="subform">
                            <a href="#" onclick="document.getElementById('subform').submit();return false"><i class="fa fa-sign-out fa-fw"></i>登出
                            </a>
                        </form>
                    </li>
                </ul>
                <!-- /.dropdown-User -->
            </li>
            <!-- /.dropdown -->
        </ul>
        <!-- /.navbar-top-links -->

        <div class="navbar-default sidebar" role="navigation">
            <div class="sidebar-nav navbar-collapse">
                <ul class="nav" id="side-menu">
                    <li>
                        <a href="home"><i class="fa fa-dashboard fa-fw"></i> 首页</a>
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-table fa-fw"></i> 用户中心<span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level">
                            <li sec:authorize="hasRole('ROLE_ADMIN')"><!--  拥有管理员权限才显示 -->
                                <a href="roles"> 角色管理</a>
                            </li>
                            <li sec:authorize="hasRole('ROLE_ADMIN')"><!--  拥有管理员权限才显示 -->
                                <a href="assign"> 角色分配</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="persons"><i class="fa fa-male fa-fw"></i> 人员管理</a>
                    </li>
                    <li>
                        <a href="notes"><i class="fa fa-book fa-fw"></i> Note管理</a>
                    </li>
                </ul>
            </div>
            <!-- /.sidebar-collapse -->
        </div>
        <!-- /.navbar-static-side -->
    </nav>
</div>
</body>
</html>